$(function (){
    var todolist = {
        // 初始化方法
        init: function (){
            // this -> todolist
            this.catchElement()//缓存元素
            this.bindEvent()//添加事件
        },
        // 缓存元素的方法
        catchElement: function (){
            this.task = $('.task')
            this.add = $('.add')
            this.todolist = $('.todolist')
            this.all = $('.all')
            this.done = $('.done')
            this.remove = $('.remove')
            this.donelist = $('.donelist')
        },
        // 添加事件的方法
        bindEvent: function (){
            var _this = this// -> todolist
            // 点击添加任务
            this.add.click(function (){
                var text = _this.task.val()//获取输入框的值
                if (!text) {
                    alert('不能输入空值！')
                    return
                }
                var insertDom = `
                    <li>
                        <input type="checkbox" class="check">
                        <span class="con">${text}</span>
                        <span class="edit">编辑</span>
                        <span class="del">删除</span>
                    </li>
                `
                _this.todolist.append(insertDom)//把新任务的li插入ul中

                // 判断是否勾选全部
                if (_this.all.prop('checked')) {
                    // 勾选所有任务
                    $('.check').prop('checked',true)
                }

                _this.task.val('')//清空输入框的值
            })

            // 删除单个任务
            this.todolist.on('click','.del',function (){
                // 删除点击元素的父级
                $(this).parent().remove()
                // 判断所有任务是否勾选
                $('.check').each(function (index,dom){
                    if (!$(dom).prop('checked')) {
                        _this.all.prop('checked',false)
                        return false//结束each循环
                    }
                    _this.all.prop('checked',true)
                })
            })
            // 编辑任务
            this.todolist.on('click','.edit',function (){
                // 获取当前编辑任务内容
                var text = $(this).siblings('.con').text()
                // 使用input替换span.con
                $('<input type="text" class="ipt">').replaceAll($(this).siblings('.con'))
                $('.ipt').val(text).focus()//赋值并自动获得焦点
            })
            // 编辑完成
            this.todolist.on('blur','.ipt',function (){
                // 获取当前输入的内容
                var text = $(this).val()
                if (!text) {
                    $(this).focus()
                    return
                }
                var conDom = '<span class="con">'+text+'</span>'
                $(conDom).replaceAll($(this))
            })
            // 勾选任务
            this.todolist.on('click','.check',function (){
                // 判断所有任务是否勾选
                $('.check').each(function (index,dom){
                    if (!$(dom).prop('checked')) {
                        _this.all.prop('checked',false)
                        return false//结束each循环
                    }
                    _this.all.prop('checked',true)
                })
            })
            // 勾选全部
            this.all.click(function (){
                if ($(this).prop('checked')) {
                    $('.check').prop('checked',true)
                } else {
                    $('.check').prop('checked',false)
                }
            })
            // 批量删除
            this.remove.click(function (){
                $('.todolist input:checked').each(function (index,dom){
                    // 删除每一个勾选框的父级
                    $(dom).parent().remove()
                })
                _this.all.prop('checked',false)
            })
            // 批量处理
            this.done.click(function (){
                $('.todolist input:checked').each(function (index,dom){
                    // 获取每一天勾选任务的内容
                    var text = $(dom).siblings('.con').text()
                    var insertDom = '<li>'+text+'</li>'
                    _this.donelist.append(insertDom)
                    // 删除每一个勾选框的父级
                    $(dom).parent().remove()
                })
                _this.all.prop('checked',false)
            })
        }
    }
    todolist.init()
})